<template>
  <view class="page_min_height page_bg page_pb">
    <view class="sticky top-0 py-10 bg-white z-[999]">
      <uni-segmented-control
        :current="current"
        :values="tabList"
        styleType="text"
        activeColor="#0163ff"
        inActiveColor="#999999"
        @clickItem="onClickItem"
      />
    </view>
    <DataLoading v-if="loading" />
    <template v-else>
      <view v-if="dataList.length" class="mt-12 px-12">
        <view v-for="item in dataList" :key="item.id" class="mb-12 p-12 bg-white rounded-md" @click="toDetail(item.id)">
          <view class="flex justify-between items-center">
            <view class="font-bold text-gray-500">{{ item.created_at }}</view>
            <view class="px-6 py-4 text-xs rounded" :class="WORK_ORDER_STATUS_CLS[item.serviceTicket?.status] || ''">
              {{ item.serviceTicket?.status_text }}
            </view>
          </view>
          <view class="flex items-center mt-12">
            <view class="text-gray-400">工单编号：</view>
            <view>{{ item.serviceTicket?.code || '-' }}</view>
          </view>
          <view v-if="item.serviceTicket?.owner?.name" class="flex items-center mt-6">
            <view class="text-gray-400">负责人：</view>
            <view class="flex-1">{{ item.serviceTicket.owner.name }}</view>
          </view>
          <view class="flex items-center mt-6">
            <view class="text-gray-400">诉求：</view>
            <view class="flex-1 line-clamp-1">{{ item.appeal || '-' }}</view>
          </view>
        </view>
      </view>
      <template v-else-if="userIdentity.isLogin">
        <EmptyData v-if="userIdentity.isCustomer" />
        <NotCustomer v-else />
      </template>
      <NotLogin v-else />
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getConsultListApi } from '@/api/service';
import { usePage, useUserIdentity } from '@/utils/usePublic';
import { WORK_ORDER_STATUS_CLS } from '@/libs/config';

const loading = ref(true);
const dataList = ref([]);
const pageParams = usePage({
  type: 'contract_review',
});
const app = getApp();
let isFirstEnter = false;
const userIdentity = useUserIdentity();

onLoad(() => {
  isFirstEnter = true;
  setTimeout(() => {
    isFirstEnter = false;
  }, 1000);
  if (userIdentity.isCustomer) {
    initData();
  } else {
    loading.value = false;
  }
});

onShow(() => {
  if (!isFirstEnter && app.globalData.isRefreshConsultList) {
    initData();
    app.globalData.isRefreshConsultList = false;
  }
});

onPullDownRefresh(() => {
  setTimeout(() => {
    initData();
    uni.stopPullDownRefresh();
  }, 500);
});

onReachBottom(() => {
  if (pageParams.isLoadAll || !userIdentity.isCustomer) {
    return;
  }
  pageParams.page++;
  getDataList();
});

const current = ref(0);
const tabList = ['全部', '待确认', '待分配', '处理中', '完结'];
const statusList = ['', 'pending', 'pending_assignment', 'processing', 'completed'];
function onClickItem(e) {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
    pageParams.status = statusList[e.currentIndex];
    initData();
  }
}

function initData() {
  loading.value = true;
  pageParams.page = 1;
  pageParams.isLoadAll = false;
  dataList.value = [];
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  });
  getDataList();
}

async function getDataList() {
  try {
    const { code, data } = await getConsultListApi({ ...pageParams });
    loading.value = false;
    if (code === 200) {
      data.list.forEach(item => {
        if (item.serviceTicket?.status === 'rejected') {
          item.serviceTicket.status = 'pending_assignment';
          item.serviceTicket.status_text = '待分配';
        }
      });
      dataList.value = dataList.value.concat(data.list);
      pageParams.isLoadAll = data.list.length < pageParams.limit;
    }
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
}

function toDetail(id) {
  uni.navigateTo({
    url: `/pages/contract/review/detail?id=${id}`,
  });
}
</script>
